<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="auto"
      v-loading="formLoading"
    >

      <el-row :gutter="20">
        <!--左半部分-->
        <el-col :span="12">
          <el-form-item :label="t('searchbar.type')" prop="deviceType">
            <el-select v-model="formData.deviceType" :placeholder="t('searchbar.typeInfo')">
              <el-option
                v-for="dict in getStrDictOptions(DICT_TYPE.YQ_TYPE)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>



          <el-form-item :label="t('formData.serialNumberLabel')" prop="serialNumber">
            <el-input v-model="formData.serialNumber" :placeholder="t('formData.serialNumberPlaceholder')" />
          </el-form-item>

          <el-form-item :label="t('formData.coefficientKLabel')" prop="coefficientK">
            <el-input v-model="formData.coefficientK" :placeholder="t('formData.coefficientKPlaceholder')" />
          </el-form-item>

          <el-form-item :label="t('formData.fieldNameLabel')" prop="fieldName">
            <el-input v-model="formData.fieldName" :placeholder="t('formData.fieldNamePlaceholder')" />
          </el-form-item>

          <el-form-item :label="t('formData.calculMethodLabel')" prop="calculMethod">
            <el-select v-model="formData.calculMethod" :placeholder="t('formData.calculMethodPlaceholder')">
              <el-option
                v-for="dict in getStrDictOptions(DICT_TYPE.CALCUL_METHOD)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item :label="t('formData.dataTypeLabel')" prop="dataType">
            <el-input v-model="formData.dataType" :placeholder="t('formData.dataTypePlaceholder')" />
          </el-form-item>
        </el-col>




        <!--右半部分-->
        <el-col :span="12">


          <el-form-item :label="t('searchbar.model')" prop="deviceMode">
            <el-input v-model="formData.deviceMode" :placeholder="t('searchbar.modelInfo')" />
          </el-form-item>

<!--          <el-form-item :label="t('searchbar.model')" prop="deviceMode">
            <el-select v-model="formData.deviceMode" :placeholder="t('searchbar.modelInfo')"  v-if="getSelectOption">
              <el-option
                v-for="dict in getSelectOption"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>-->

          <!--      <el-form-item :label="t('searchbar.model')" prop="deviceMode">
              <el-select
                v-model="formData.deviceMode"
                filterable
                remote
                reserve-keyword
                :placeholder="t('searchbar.modelInfo')"
                clearable
                :remote-method="modeMethod"
                :loading="AllLoading"
                @keyup.enter="handleChange"
              >
                <el-option
                  v-for="item in modeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @click= "addForm(item)"
                >
                  <span style="float: left">仪器型号：{{ item.label }}</span>
                </el-option>
              </el-select>
            </el-form-item>-->



          <el-form-item :label="t('formData.witsCodeLabel')" prop="witsCode">
            <el-input v-model="formData.witsCode" :placeholder="t('formData.witsCodePlaceholder')" />
          </el-form-item>

          <el-form-item :label="t('formData.coefficientBLabel')" prop="coefficientB">
            <el-input v-model="formData.coefficientB" :placeholder="t('formData.coefficientBPlaceholder')" />
          </el-form-item>

          <el-form-item :label="t('formData.chMeanLabel')" prop="chMean">
            <el-input v-model="formData.chMean" :placeholder="t('formData.chMeanPlaceholder')" />
          </el-form-item>

          <el-form-item :label="t('formData.unitLabel')" prop="unit">
            <el-select v-model="formData.unit" :placeholder="t('formData.unitPlaceholder')">
              <el-option
                v-for="dict in getStrDictOptions(DICT_TYPE.UNITS)"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item :label="t('formData.lengthLabel')" prop="length">
            <el-input v-model="formData.length" :placeholder="t('formData.lengthPlaceholder')" />
          </el-form-item>

        </el-col>
      </el-row>




      <el-form-item :label="t('formData.remark')" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          :rows="4"
          :placeholder="t('formData.remarkInfo')"
        />
      </el-form-item>




<!--      <el-form-item :label="t('form.state')" prop="state">
        <el-select
          v-model="formData.state"
          class="!w-240px"
          clearable
          :placeholder="t('form.selectState')"
        >
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.DEVICE_STATE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>-->

    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">
        {{ t('action.confirm') }}
      </el-button>
      <el-button @click="dialogVisible = false">
        {{ t('action.cancel') }}
      </el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import {getStrDictOptions, getBoolDictOptions, DICT_TYPE, getIntDictOptions} from '@/utils/dict'
import { StandardsApi, StandardsVO } from '@/api/base/standards'
import {SiteApi} from "@/api/base/site";

/** 协议库 表单 */
defineOptions({ name: 'StandardsForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  serialNumber: undefined,
  fieldName: undefined,
  unit: undefined,
  coefficientK: undefined,
  coefficientB: undefined,
  dataType: undefined,
  chMean: undefined,
  calculMethod: undefined,
  witsCode: undefined,
  deviceType: undefined,
  deviceMode: undefined,
  length: undefined,
  state: undefined,
  remark: undefined,
})
const formRules = reactive({
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await StandardsApi.getStandards(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as StandardsVO
    if (formType.value === 'create') {
      await StandardsApi.createStandards(data)
      message.success(t('common.createSuccess'))
    } else {
      await StandardsApi.updateStandards(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    serialNumber: undefined,
    fieldName: undefined,
    unit: undefined,
    coefficientK: undefined,
    coefficientB: undefined,
    dataType: undefined,
    chMean: undefined,
    calculMethod: undefined,
    witsCode: undefined,
    deviceType: undefined,
    deviceMode: undefined,
    length: undefined,
    state: undefined,
    remark: undefined,
  }
  formRef.value?.resetFields()
}
/*

/!*-------------------设备与型号关联部分----------------------*!/
// 计算属性，根据 formData.device 返回相应的选项列表
const getSelectOption = computed(() => {
  const dictTypes = {
    A: DICT_TYPE.A,
    B: DICT_TYPE.B,
    C: DICT_TYPE.C,
    D: DICT_TYPE.D,
    E: DICT_TYPE.E,
    F: DICT_TYPE.F,
    G: DICT_TYPE.G,
    H: DICT_TYPE.H
  };
  return getStrDictOptions(dictTypes[formData.value.deviceType]);
});
*/

/*

const handleChange = async (value) => {
  siteListvalue.value = await SiteApi.getSiteList(query)
  siteName.value = siteListvalue.value[0].wellName
}

const addForm = (item) => {
  formData.value.deviceMode = item.value
}

/!*---------------------------获取仪器型号------------------------------*!/
const AllLoading = ref(false)
const modeList = ref<StandardsVO[]>([])
const modeMethod = async (query) => {
  AllLoading.value = true
  modeList.value = []
  AllLoading.value = false
  const data =  await StandardsApi.getModeList(query)
  modeList.value = data
}
const modeHandleChange = async (item) => {
  siteListvalue.value = await StandardsApi.getModeList(query)
  mode.value = siteListvalue.value[0].mode
}*/


</script>
